<template>
  <GridPage title="招聘职位信息审核情况" size="full">
    <n-alert title="提示" type="info" class="mt-12">
      招聘职位信息审核通过后不可修改，请仔细检查核对提交内容。
    </n-alert>
    <n-card class="mt-12">
      <n-data-table
        :bordered="false"
        :columns="tableColumns"
        :data="jobPosting"
        max-height="350px"
        :pagination="pagination"
      />
    </n-card>
  </GridPage>

  <MeModal ref="editRef" title="编辑招聘信息" width="600px" @ok="handleEditSave()">
    <n-form ref="formRef" :model="form" :rules="rules">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi label="职位名称" path="title" :span="12">
          <n-input v-model:value="form.title" />
        </n-form-item-gi>
        <n-form-item-gi label="职位类型" path="job_code" :span="12">
          <n-input v-model:value="job_name" @click="handleOpenJobSelect" class="cursor-pointer" />
        </n-form-item-gi>
        <n-form-item-gi label="工作类型" path="type" :span="12">
          <n-select v-model:value="form.type" :options="typeOps" />
        </n-form-item-gi>
        <n-form-item-gi label="工作地点" path="address_code" :span="12">
          <n-cascader
            v-model:value="form.address_code"
            expand-trigger="hover"
            :options="cities"
            :show-path="true"
            check-strategy="child"
          />
        </n-form-item-gi>
        <n-form-item-gi label="最低月薪" path="salary_min" :span="12">
          <n-input
            v-model:value="form.salary_min"
            :allow-input="onlyAllowNumber"
            style="margin-right: 10px"
          />
          <span style="margin-right: 20px">k</span>
        </n-form-item-gi>
        <n-form-item-gi label="最高月薪" path="salary_max" :span="12">
          <n-input
            v-model:value="form.salary_max"
            :allow-input="onlyAllowNumber"
            :disabled="!form.salary_min"
            style="margin-right: 10px"
          />
          <span style="margin-right: 20px">k</span>
        </n-form-item-gi>
        <n-form-item-gi label="学历要求" path="education_requirement" :span="12">
          <n-select v-model:value="form.education_requirement" :options="degreeOps" />
        </n-form-item-gi>
        <n-form-item-gi label="职位标签" path="job_tags" :span="24">
          <n-card embedded>
            <n-dynamic-tags v-model:value="form.job_tags" :max="8" />
          </n-card>
        </n-form-item-gi>
        <n-form-item-gi label="职位描述" path="job_description" :span="24">
          <n-input
            v-model:value="form.job_description"
            type="textarea"
            maxlength="1000"
            :autosize="{
              minRows: 4,
              maxRows: 6,
            }"
          />
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </MeModal>
  <JobSelect ref="jobSelectRef" @click-job="handleClickJob"></JobSelect>
</template>

<script setup>
import { NTag, NButton } from 'naive-ui'
import { MeModal, JobSelect, GridPage } from '@/components'
import recruiterApi from '@/api/recruiter'
import { useRecruiterStore } from '@/store/modules/recruiter'
import { useForm, useModal } from '@/composables'
import { cities, getJobName, getCity } from '@/data'
const recruiterStore = useRecruiterStore()

const rules = {
  title: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  job_code: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  type: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  address_code: { required: true, message: '此为必填项', trigger: ['blur'] },
  salary_min: {
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
  salary_max: [
    {
      required: true,
      message: '此为必填项',
      trigger: ['blur'],
    },
    {
      trigger: ['input', 'blur'],
      message: '不得低于最低薪资',
      validator: (rule, value) => {
        return parseInt(value) >= parseInt(form.value.salary_min)
      },
    },
  ],
  job_tags: {
    type: 'array',
    required: true,
    message: '至少输入一个标签',
    trigger: ['blur', 'change'],
  },
  education_requirement: {
    type: 'number',
    required: true,
    message: '此为必填项',
    trigger: ['blur'],
  },
}
//表格列数据
const tableColumns = ref([
  {
    title: '职位名称',
    key: 'title',
    align: 'center',
    width: '190px',
  },
  {
    title: '职位类型',
    key: 'job_code',
    align: 'center',
    width: '120px',
    render(row) {
      return getJobName(row.job_code)
    },
  },
  {
    title: '工作类型',
    key: 'type',
    align: 'center',
    width: '85px',
    render(row) {
      return typeOps[row.type].label
    },
  },
  {
    title: '工作地点',
    key: 'address_code',
    align: 'center',
    width: '120px',
    render(row) {
      return getCity(row.address_code)
    },
  },
  {
    title: '月薪',
    key: 'salary',
    align: 'center',
    width: '120px',
    render(row) {
      return row.salary_min + 'k - ' + row.salary_max + 'k'
    },
  },
  {
    title: '学历要求',
    key: 'edu_requirement',
    align: 'center',
    width: '90px',
    render(row) {
      return degreeOps[row.education_requirement].label
    },
  },
  {
    title: '审核状态',
    key: 'audit_state',
    align: 'center',
    width: '90px',
    render(row) {
      const obj = audit_state[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: obj.type,
          bordered: false,
        },
        {
          default: () => obj.label,
        }
      )
    },
    filterOptions: [
      {
        label: '审核中',
        value: 0,
      },
      {
        label: '已通过',
        value: 1,
      },
      {
        label: '未通过',
        value: 2,
      },
    ],
    filter(value, row) {
      return row.state === value
    },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '100px',
    render(row) {
      return [
        h(
          NButton,
          {
            text: true,
            type: 'info',
            style: { marginRight: '10px' },
            disabled: row.state !== 0,
            onClick: () => handleEdit(row),
          },
          { default: () => '编辑' }
        ),
        h(
          NButton,
          {
            text: true,
            type: 'error',
            disabled: row.state !== 0,
            onClick: () => handleDelete(row),
          },
          { default: () => '删除' }
        ),
      ]
    },
  },
])

const pagination = {
  pageSize: 5
}
//招聘信息数据
const jobPosting = ref([])

const audit_state = [
  { type: 'warning', label: '审核中' },
  { type: 'success', label: '已通过' },
  { type: 'error', label: '未通过' },
  { type: 'error', label: '已撤销' },
]

const degreeOps = [
  { value: 0, label: '中专/中技' },
  { value: 1, label: '大专' },
  { value: 2, label: '本科' },
  { value: 3, label: '硕士' },
  { value: 4, label: 'MBA/EMBA' },
  { value: 5, label: '博士' },
  { value: 6, label: '学历不限' },
]

const typeOps = [
  { value: 0, label: '实习' },
  { value: 1, label: '应届' },
  { value: 2, label: '全职' },
  { value: 3, label: '兼职' },
]

let job_name = computed(() => {
  return getJobName(form.value.job_code)
})

const [editRef] = useModal()
const [formRef, form, validation] = useForm({})

//打开编辑招聘信息对话框
function handleEdit(jp) {
  const value = form.value
  value.job_id = jp.job_id
  value.title = jp.title
  value.job_code = jp.job_code
  value.type = jp.type
  value.address_code = jp.address_code
  value.salary_min = jp.salary_min.toString()
  value.salary_max = jp.salary_max.toString()
  value.education_requirement = jp.education_requirement
  value.job_tags = jp.job_tags
  value.job_description = jp.job_description
  editRef.value.open()
}
//打开确认删除对话框
function handleDelete(jp) {
  $dialog.error({
    title: '确定删除？',
    content: '是否删除该招聘信息',
    async confirm() {
      await recruiterApi.deleteJobPosting(jp.job_id)
      $message.success('删除成功')
      const job_obj = jobPosting.value.find((e) => e.job_id === jp.job_id)
      jobPosting.value.pop(job_obj)
    },
  })
}

//设置只允许输入数字
function onlyAllowNumber(value) {
  return !value || /^\d+$/.test(value)
}
//打开职业类别选择框
const jobSelectRef = ref()
function handleOpenJobSelect() {
  jobSelectRef.value.open()
}
//设置点击目标的职业信息
function handleClickJob(job_obj) {
  form.value.job_code = job_obj.job_code
}

async function handleEditSave() {
  await validation()
  form.value.recruiter_id = recruiterStore.recruiter.recruiter_id
  form.value.company_id = recruiterStore.recruiter.company_id
  await recruiterApi.updateJobPosting(form.value)
  $message.success('提交成功')
  const job_obj = jobPosting.value.find((e) => e.job_id === form.value.job_id)
  job_obj.title = form.value.title
  job_obj.job_code = form.value.job_code
  job_obj.type = form.value.type
  job_obj.address_code = form.value.address_code
  job_obj.salary_min = parseInt(form.value.salary_min)
  job_obj.salary_max = parseInt(form.value.salary_max)
  job_obj.education_requirement = form.value.education_requirement
  job_obj.job_tags = form.value.job_tags
  job_obj.job_description = form.value.job_description
}

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const { data } = await recruiterApi.getRecruiterJobPosting(recruiterStore.recruiter.recruiter_id)
  if (data) {
    jobPosting.value = data
  }
})
</script>
